<!DOCTYPE html>
<html>
<head>
	<title>omg.js | Drag Drop</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#canvas {
			margin: 0;
			background-color: #fff;
		}
	</style>
</head>
<body>
<div id="fps"></div>
<div class="container">
	<canvas id="canvas"></canvas>
</div>
<script src="./omg.min.js"></script>
<script>
  var flag;
  var bear = 0;
  var width = document.body.clientWidth,
  	height = document.body.clientHeight;

	var stage = omg({
		element: document.getElementById('canvas'),
		width: width,
		height: height,
		enableGlobalTranslate: true,
		prepareImage: true
	});

	stage.init();

	function draw() {
		var title = stage.graphs.text({
			x: (width - 800)/2,
			y: (height - 300)/2,
			width: 800,
			height: 300,
			paddingTop: 0, //text padding top
			center: true, 
			background: {
				color: 'blue'
			}, // optional
			fontFamily: 'italic bold arial,sans-serif',
			fontSize: 180,
			text: 'omg',
			color: '#fff',
			style: 'fill'
		}).config({
			fixed: true,
			bg: true
		});

		var trash = stage.graphs.text({
			x: width - 300,
			y: 40,
			width: 280,
			height: 120,
			paddingTop: 30, //text padding top
			center: true, 
			background: {
				color: '#ef4476'
			}, // optional
			fontFamily: 'italic bold arial,sans-serif',
			fontSize: 48,
			text: '笼子(' + bear + ')',
			color: '#fff',
			type: 'fill'
		}).config({
			fixed: true,
			drag: true
		}).on('dragin', function() {
			trash.background.color = 'red';
		}).on('dragout', function() {
			trash.background.color = '#ef4476';
		}).on('drop', function( item, cur ) {
			bear++;
			trash.background.color = '#ef4476';
			trash.text = '笼子(' + bear + ')';
			stage.removeChild(cur);
			stage.redraw();
		});

		var tip = stage.graphs.text({
			x: width - 300,
			y: -20,
			width: 280,
			height: 40,
			paddingTop: 30, //text padding top
			center: true, 
			fontFamily: 'italic bold arial,sans-serif',
			fontSize: 16,
			text: '把草尼马拖进笼子',
			color: 'blue',
			type: 'fill'
		}).config({
			fixed: true
		});

		stage.addChild([title, trash, tip]);

		function createBear() {
			var arr = [{
				w: 97,
				sx: 5,
				sy: 0
			}, {
				w: 97,
				sx: 5,
				sy: 470
			}, {
				w: 64,
				sx: 3,
				sy: 238
			}, {
				w: 82,
				sx: 7,
				sy: 718
			}];

			var randomNum = Math.round(Math.random()*3);
			stage.addChild(
				stage.graphs.image({
					x: Math.random() * width - 50,
					y: Math.random() * height - 60,
					width: arr[randomNum].w,
					height: 110,
					sliceX: arr[randomNum].sx,
					sliceY: arr[randomNum].sy,
					sliceWidth: arr[randomNum].w,
					sliceHeight: 110,
					src: './img/action.png'
				}).config({
					drag: true,
					changeIndex: true,
					zindex: 2
				})
			);
		}
		
		for(var i = 0;i < 20; i++) {
			createBear();
		}
	}

	draw();
	stage.show();
	stage.animate(go);
	stage.resize({
		width: () => document.body.clientWidth,
		height: () => document.body.clientHeight,
		resize: function(update) {
			update();
			stage.objects = [];
			stage._objects = [];
			draw();
			stage.animationList = [];
			stage.animate(go);
		}
	});

	var num = 0;
	function go() {
		if(num % 4 === 0) {
			stage.objects.forEach(function(item) {

				if(item.sliceY === 0) {
					if(item.sliceX > 102 * 7) {
						item.sliceX = 5;
					} else {
						item.sliceX = item.sliceX + 102;
					}
				} else if(item.sliceY === 238) {
					if(item.sliceX > 64 * 7) {
						item.sliceX = 3;
					} else {
						item.sliceX = item.sliceX + 64;
					}
				} else if(item.sliceY === 470) {
					if(item.sliceX > 104 * 7) {
						item.sliceX = 5;
					} else {
						item.sliceX = item.sliceX + 104;
					}
				} else if(item.sliceY === 718) {
					if(item.sliceX > 82 * 7) {
						item.sliceX = 7;
					} else {
						item.sliceX = item.sliceX + 82;
					}
				}

			});
		}
		num++;
	}

</script>
</body>
</html>